let imgs = document.querySelectorAll("img");
let next = document.querySelector(".after");
let prev = document.querySelector(".before");
imgs.forEach((img) => {
  img.style.left = "-600px";
});
imgs[0].style.left = "0";
let i = 0;
let len = imgs.length;
next.addEventListener("click", () => {
  i++;
  let now = i % len;
  let before = (i - 1) % len;
  if (now > before) {
    imgs[now].style.left = 0;
    imgs[before].style.left = "600px";
  } else {
    imgs.forEach((img) => {
      img.style.left = "-600px";
    });
    imgs[0].style.left = "0";
  }
});
prev.addEventListener("click", () => {
  i += 2;
  let now = i % len;
  let before = (i + 1) % len;
  if (now < before) {
    imgs[now].style.left = 0;
    imgs[before].style.left = "-600px";
  } else {
    imgs.forEach((img) => {
      img.style.left = "600px";
    });
    imgs[len - 1].style.left = "0";
  }
});
